<template>
  <div>
    <el-header>
      <el-form ref="projectRule" :rules="projectRule" :model="project">
        <el-row>
           
          <el-col style="width:350px;">
            <el-form-item label="标签ID:" prop="elabelNum">
              <el-input v-model="project['elabelNum']" placeholder="请输入标签ID" filterable clearable>
               
              </el-input>
            </el-form-item>
          </el-col>
          <el-col style="width:155px;">
            <el-button class="query" @click="buttonClick">
              查询
            </el-button>
            <el-button class="query" @click="reset">
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-header>

    <el-main>
      <div class="contentInfo" style="margin-bottom:20px;">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景使用情况
          </el-col>
        </el-row>
        <el-row>
          <div class="inline">
            <div><span>调用次数/日：</span><span>{{ queryCount }}</span></div>
            <div><a class="link" href="javascript:;" @click="$router.push({name:'biz-ml'})">详情</a></div>
          </div>
        </el-row>
      </div>
      <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景说明
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="description">内存数据库通过标签ID实时查询资源资产信息。</div>
            <!-- <div class="params-tip">示例参数：项目编码:19A12SHXQ0802186，项目状态校验类型:资源确认且内部验收</div> -->
          </div>
        </el-row>
      </div>
    </el-main>
    <el-main>
      <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            校验结果
          </el-col>
        </el-row>

        <el-row>
          <div class="page-tip">
            <div class="description">
              <!-- <div> {{ dialog.title }} </div> -->
              <el-row  class="dialog-row">
                <el-col>
                 <el-table
                  :data="dialog.content"
                  style="width: 100%">
                  <el-table-column
                    prop="resourceAssetCode"
                    label="资源资产编码"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="assetName"
                    label="资产分类"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="stationCode"
                    label="站址编码">
                  </el-table-column>
                  <el-table-column
                    prop="stationName"
                    label="站址名称">
                  </el-table-column>
                  <el-table-column
                    prop="spuCode"
                    label="物料编码">
                  </el-table-column>
                  <el-table-column
                    prop="spuName"
                    label="物料名称">
                  </el-table-column>
                </el-table>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-row>
      
        <el-row>
          <div class="page-tip">
            <div class="description">
              <!-- <div> {{ dialog.title }} </div> -->
              <el-row  class="dialog-row">
                <el-col>
                 <el-table
                  :data="dialog.content"
                  style="width: 100%">
                  <el-table-column
                    prop="resourceAssetCode"
                    label="资源资产编码"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="assetName"
                    label="资产分类"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="stationCode"
                    label="站址编码">
                  </el-table-column>
                  <el-table-column
                    prop="stationName"
                    label="站址名称">
                  </el-table-column>
                  <el-table-column
                    prop="spuCode"
                    label="物料编码">
                  </el-table-column>
                  <el-table-column
                    prop="spuName"
                    label="物料名称">
                  </el-table-column>
                </el-table>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-row>

        <el-row>
          <div class="page-tip">
            <div class="description">
              <!-- <div> {{ dialog.title }} </div> -->
              <el-row  class="dialog-row">
                <el-col>
                 <el-table
                  :data="dialog.content"
                  style="width: 100%">
                  <el-table-column
                    prop="resourceAssetCode"
                    label="资源资产编码"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="assetName"
                    label="资产分类"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="stationCode"
                    label="站址编码">
                  </el-table-column>
                  <el-table-column
                    prop="stationName"
                    label="站址名称">
                  </el-table-column>
                  <el-table-column
                    prop="spuCode"
                    label="物料编码">
                  </el-table-column>
                  <el-table-column
                    prop="spuName"
                    label="物料名称">
                  </el-table-column>
                </el-table>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-row>

        <el-row>
          <div class="page-tip">
            <div class="description">
              <!-- <div> {{ dialog.title }} </div> -->
              <el-row  class="dialog-row">
                <el-col>
                 <el-table
                  :data="dialog.content"
                  style="width: 100%">
                  <el-table-column
                    prop="resourceAssetCode"
                    label="资源资产编码"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="assetName"
                    label="资产分类"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="stationCode"
                    label="站址编码">
                  </el-table-column>
                  <el-table-column
                    prop="stationName"
                    label="站址名称">
                  </el-table-column>
                  <el-table-column
                    prop="spuCode"
                    label="物料编码">
                  </el-table-column>
                  <el-table-column
                    prop="spuName"
                    label="物料名称">
                  </el-table-column>
                </el-table>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-row>

        <el-row>
          <div class="page-tip">
            <div class="description">
              <!-- <div> {{ dialog.title }} </div> -->
              <el-row  class="dialog-row">
                <el-col>
                 <el-table
                  :data="dialog.content"
                  style="width: 100%">
                  <el-table-column
                    prop="resourceAssetCode"
                    label="资源资产编码"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="assetName"
                    label="资产分类"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="stationCode"
                    label="站址编码">
                  </el-table-column>
                  <el-table-column
                    prop="stationName"
                    label="站址名称">
                  </el-table-column>
                  <el-table-column
                    prop="spuCode"
                    label="物料编码">
                  </el-table-column>
                  <el-table-column
                    prop="spuName"
                    label="物料名称">
                  </el-table-column>
                </el-table>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-row>

        <el-row>
          <div class="page-tip">
            <div class="description">
              <!-- <div> {{ dialog.title }} </div> -->
              <el-row  class="dialog-row">
                <el-col>
                 <el-table
                  :data="dialog.content"
                  style="width: 100%">
                  <el-table-column
                    prop="resourceAssetCode"
                    label="资源资产编码"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="assetName"
                    label="资产分类"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="stationCode"
                    label="站址编码">
                  </el-table-column>
                  <el-table-column
                    prop="stationName"
                    label="站址名称">
                  </el-table-column>
                  <el-table-column
                    prop="spuCode"
                    label="物料编码">
                  </el-table-column>
                  <el-table-column
                    prop="spuName"
                    label="物料名称">
                  </el-table-column>
                </el-table>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-row>

        <el-row>
          <div class="page-tip">
            <div class="description">
              <!-- <div> {{ dialog.title }} </div> -->
              <el-row  class="dialog-row">
                <el-col>
                 <el-table
                  :data="dialog.content"
                  style="width: 100%">
                  <el-table-column
                    prop="resourceAssetCode"
                    label="资源资产编码"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="assetName"
                    label="资产分类"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="stationCode"
                    label="站址编码">
                  </el-table-column>
                  <el-table-column
                    prop="stationName"
                    label="站址名称">
                  </el-table-column>
                  <el-table-column
                    prop="spuCode"
                    label="物料编码">
                  </el-table-column>
                  <el-table-column
                    prop="spuName"
                    label="物料名称">
                  </el-table-column>
                </el-table>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-row>

        <el-row>
          <div class="page-tip">
            <div class="description">
              <!-- <div> {{ dialog.title }} </div> -->
              <el-row  class="dialog-row">
                <el-col>
                 <el-table
                  :data="dialog.content"
                  style="width: 100%">
                  <el-table-column
                    prop="resourceAssetCode"
                    label="资源资产编码"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="assetName"
                    label="资产分类"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="stationCode"
                    label="站址编码">
                  </el-table-column>
                  <el-table-column
                    prop="stationName"
                    label="站址名称">
                  </el-table-column>
                  <el-table-column
                    prop="spuCode"
                    label="物料编码">
                  </el-table-column>
                  <el-table-column
                    prop="spuName"
                    label="物料名称">
                  </el-table-column>
                </el-table>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-row>
      </div>
    </el-main>

  </div>


</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        queryCount:0,
        project: {
            elabelNum: ''
        },
        dialog: {
          title: '',
          content: []
        },
        options: [{
            value: 'tssai',
            key: '1'
          }
        ],
        projectRule: {
          elabelNum: [{
            required: true,
            message: '请输入标签ID',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.queryPageCount('3.12');
    },
    mounted() {},
    computed: {},
    methods: {
      async buttonClick() {
        try {
          this.dialog = {
            title: '',
            content: []
          }

          await this.$refs['projectRule'].validate()
          const data = [{
            elabelNum: this.project['elabelNum']
          }]
          const r = await this.$http({
            url: this.$http.adornBizUrl('/resource/assets'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify(data), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          console.log(r.data);
          if (r.data.resultStat ==="000") {
            // console.log(r.data.data.retiurnMsg)
            this.dialog.content = r.data.data[0]
            
            // this.dialog.title = r.data.data.retiurnMsg
          }else{
              this.dialog.title = r.data.mess
          }
          this.dialogVisible = true
        } catch (e) {
          console.log(e)
        } finally {
          this.listLoading = false
        }
      },
      getTitle(key) {
        const option = this.options.filter(o => o.key === key)
        let value = null
        if (option[0]) {
          value = option[0].value
        }
        return value
      },
      reset() {
        this.project = {
          prjCode: '',
          operationId: ''
        }

        this.dialog = {
          title: '',
          content: []
        }
        this.$refs['projectRule'].clearValidate();
      },
      change(e) {
        this.$forceUpdate()
      },

      async queryPageCount(scene) {
        try {
          const r = await this.$http({
            url: this.$http.adornBizUrl('/log/queryStatistics'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify({scene:scene}), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          if(r.data.data && r.data.data.length >0){
              var result = r.data.data[0];
              this.queryCount=result.cnt||'0';
          }
        } catch (e) {
          console.log(e)
        } finally {
        }
      }
    }
  }
</script>

<style scoped>
  .el-input {
    width: 70%;
  }

  .el-select {
    width: 60%;
  }

  .query {
    color: rgba(255, 255, 255, 1);
    background: rgba(235, 75, 75, 1);
    border-radius: 6px;
    border-color: rgba(235, 75, 75, 1);
  }

  .custom-button {
    display: flex;
    justify-content: center;
  }

  .dialog-row {
    margin-bottom: 5px;
  }
</style>
